<h1>Downline</h1>

<style type="text/css">
	#load-status {
		font-size:20px;
		line-height:24px;
		color:#3d3d3d;
		font-family:'Lucida Sans Unicode' Helvetica sans-serif;
	}
</style>

<span id="load-status">Loading...</span>
<div id="container" style="display:none;height:<?php echo ($root_count * 20); ?>px;">
	<?=$downline?>
</div>

<script src="<?=$base_url?>js/jstree/jquery.jstree.js"></script>
<script>
	var last_children_count = 0;
	var items_cnts = new Array();
	var cur = 0;
	
	jQuery(function($) {
		  jQuery('#container').jstree({
				"plugins" : ["themes","html_data"],
				"core" : { }
		  })
		  .bind("loaded.jstree", function (event, data) { 
					jQuery('#load-status').hide(); 
					jQuery('#container').show(); 
		  })
		  .bind("open_node.jstree", function (e, data) {
				var _d 		= data.rslt.obj.html();
				var _cnt 	= jQuery('ul:not(li > ul)', jQuery('<ul>'+_d+'</ul>')).children().length;
				var _h 		= jQuery('#container').height();
				    _h 		= _h + (_cnt*20);
				jQuery('#container').height(_h);
		  })
		  .bind("close_node.jstree", function (e, data) {
				var _d 		= data.rslt.obj.html();
				var _cnt 	= jQuery('ul:not(li > ul)', jQuery('<ul>'+_d+'</ul>')).children().length;
				var _h 		= jQuery('#container').height();
				    _h 		= _h - (_cnt*20);
				jQuery('#container').height(_h);
		  });
	});

	
</script>